<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>lumina AI - 让学习 AI 变简单</title>
    <script src="assets/js/tailwindcss.js"></script>
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#FFE45C',
                        secondary: '#FFE45C', // 主题色统一为柠檬黄
                        accent: '#10B981'
                    },
                    borderRadius: {
                        'none': '0px',
                        'sm': '2px',
                        DEFAULT: '4px',
                        'md': '8px',
                        'lg': '12px',
                        'xl': '16px',
                        '2xl': '20px',
                        '3xl': '24px',
                        'full': '9999px',
                        'button': '8px'
                    },
                    animation: {
                        'fade-in': 'fadeIn 0.6s ease-in-out',
                        'slide-up': 'slideUp 0.8s ease-out',
                        'bounce-gentle': 'bounceGentle 2s infinite'
                    },
                    keyframes: {
                        fadeIn: {
                            '0%': { opacity: '0' },
                            '100%': { opacity: '1' }
                        },
                        slideUp: {
                            '0%': { transform: 'translateY(30px)', opacity: '0' },
                            '100%': { transform: 'translateY(0)', opacity: '1' }
                        },
                        bounceGentle: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-10px)' }
                        }
                    }
                }
            }
        }
    </script>
    <!-- <link rel="preconnect" href="https://fonts.googleapis.com"> -->
    <!-- <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> -->
    <link href="assets/css/google-fonts-pacifico-inter.css" rel="stylesheet">
    <link href="assets/css/font-awesome.min.css" rel="stylesheet">
    <link href="assets/css/lemon-milk.css" rel="stylesheet">
    <link href="assets/css/google-fonts-montserrat.css" rel="stylesheet">
    <link href="assets/css/index.css" rel="stylesheet">
</head>
<body class="min-h-screen font-['Inter'] scroll-smooth">
    <!-- 导航栏 -->
    <header class="fixed top-0 left-0 right-0 bg-white/95 backdrop-blur-md z-50 border-b border-gray-100 shadow-sm">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <!-- logo文字使用Lemon/Milk字体 -->
                <span class="text-2xl text-black" style="font-family: 'Montserrat', Arial, sans-serif;">lumina AI</span>
            </div>
            
            <!-- 桌面端导航 -->
            <nav class="hidden md:flex items-center gap-8 justify-center flex-1">
                <a href="./index.html" class="text-[#FFE45C] font-medium transition-colors duration-200">主页</a>
                <a href="./AiEntry/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI词条</a>
                <a href="./AiOpen/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI开源</a>
                <a href="./AiHardware/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">AI硬件</a>
                <a href="./AiPrompts/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">指令库</a>
                <a href="./AiBlog/index.html" class="text-gray-600 hover:text-[#FFE45C] font-medium transition-colors duration-200">博客</a>
            </nav>
            
            <!-- 工具区域：微信、知识星球、登陆 -->
            <div class="flex items-center gap-4">
                <button class="flex items-center gap-1 text-gray-600 hover:text-secondary hover:bg-gray-100 rounded-lg px-3 py-2 transition-all duration-200">
                    <i class="fab fa-weixin"></i>
                    <!-- <span class="hidden sm:inline">微信</span> -->
                </button>
                <button class="flex items-center gap-1 text-gray-600 hover:text-[#FFE45C] hover:bg-gray-100 rounded-lg px-3 py-2 transition-colors duration-200 active:bg-gray-200">
                    <i class="fas fa-globe"></i>
                    <!-- <span class="hidden sm:inline">知识星球</span> -->
                </button>
                <button class="flex items-center gap-1 text-gray-600 hover:text-[#FFE45C] hover:bg-gray-100 rounded-lg px-3 py-2 transition-colors duration-200 active:bg-gray-200">
                    <i class="fas fa-user"></i>
                    <!-- <span class="hidden sm:inline">登陆</span> -->
                </button>
                <!-- 移动端菜单按钮 -->
                <button class="md:hidden w-10 h-10 flex items-center justify-center text-gray-600 hover:text-[#FFE45C] hover:bg-gray-100 rounded-lg transition-colors duration-200 active:bg-gray-200" onclick="toggleMobileMenu()">
                    <i class="fas fa-bars"></i>
                </button>
            </div>
        </div>
        
        <!-- 移动端菜单 -->
        <div id="mobileMenu" class="md:hidden hidden bg-white border-t border-gray-100">
            <div class="px-4 py-6 space-y-4">
                <a href="./index.html" class="block text-[#FFE45C] font-medium py-2">主页</a>
                <a href="./AiEntry/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI词条</a>
                <a href="./AiOpen/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI开源</a>
                <a href="./AiHardware/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">AI硬件</a>
                <a href="./AiPrompts/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">指令库</a>
                <a href="./AiBlog/index.html" class="block text-gray-600 hover:text-[#FFE45C] font-medium py-2">博客</a>
            </div>
        </div>
    </header>

    <main class="pt-16">
        <!-- 英雄区域 -->
        <!-- lumina-canvas 粒子动画区 -->
        <section id="lumina-particle-section" class="relative w-full bg-white flex flex-col items-center justify-center">
            <div class="absolute z-10 left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 -translate-y-[260px] w-full px-0 animate-fade-in text-center">
            
                
                <h2 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-800 mb-10 "style="background-image: linear-gradient(0deg, rgb(0,0,0) 0%, rgb(255,255,255) 125%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;">
                    让学习AI更有趣
                </h2>
                <p class="text-1xl sm:text-1xl lg:text-3xl   text-gray-800 mb-0 leading-snug whitespace-nowrap"
                   style="background-image: linear-gradient(0deg, rgb(0,0,0) 0%, rgb(255,255,255) 125%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent;">
                    懂数据流转，知模型边界，产品经理在 AI 时代的 “守正创新” 指南
                </p>
            </div>
            <canvas id="lumina-canvas" class="absolute inset-0 w-full h-full"></canvas>
            <script>
                const TEXT = "Lumina";
                const PARTICLE_SIZE = 2;
                const PARTICLE_GAP = 5.5; // 粒子采样间隔，越小越精细
                const COLOR_START = '#FFE45C'; // 柠檬黄
                const COLOR_END = '#C4B5FD';   // 紫色
                const BREATH_AMPLITUDE = 6;    // 呼吸幅度
                const BREATH_SPEED = 1.8;      // 呼吸速度
                const MOUSE_ATTRACT_DIST = 120; // 鼠标吸引半径
                const MOUSE_ATTRACT_FORCE = 0.18;
                
                const canvas = document.getElementById('lumina-canvas');
                const section = document.getElementById('lumina-particle-section');
                const ctx = canvas.getContext('2d');
                let width = window.innerWidth;
                let height; // 动态赋值
                
                function setParticleSectionHeight() {
                  const header = document.querySelector('header');
                  const windowHeight = window.innerHeight;
                  const headerHeight = header ? header.offsetHeight : 0;
                  const sectionHeight = windowHeight - headerHeight;
                  section.style.height = sectionHeight + 'px';
                  canvas.height = sectionHeight;
                  height = sectionHeight;
                  // 重新初始化粒子
                  initParticles();
                }
                
                // 计算自适应字体大小，使文字宽度占画布80%
                function getAutoFontSize(text, fontFamily, targetWidth, targetHeight) {
                  const testCanvas = document.createElement('canvas');
                  const testCtx = testCanvas.getContext('2d');
                  let fontSize = 10;
                  let measured = 0;
                  do {
                    fontSize += 2;
                    testCtx.font = `bold ${fontSize}px ${fontFamily}`;
                    measured = testCtx.measureText(text).width;
                  } while (measured < targetWidth * 0.8 && fontSize < targetHeight * 0.8);
                  return fontSize;
                }
                
                function getTextParticles(text, fontFamily, gap, areaW, areaH) {
                  // 计算字体大小
                  const fontSize = getAutoFontSize(text, fontFamily, areaW, areaH);
                  // 用离屏 canvas 渲染文字
                  const offCanvas = document.createElement('canvas');
                  offCanvas.width = areaW;
                  offCanvas.height = areaH;
                  const offCtx = offCanvas.getContext('2d');
                  offCtx.clearRect(0, 0, areaW, areaH);
                  offCtx.font = `bold ${fontSize}px ${fontFamily}`;
                  offCtx.textAlign = 'center';
                  offCtx.textBaseline = 'middle';
                  offCtx.fillStyle = '#000';
                  // 关键：y 坐标微调+整体下移140px
                  offCtx.fillText(text, areaW/2, areaH/2 - fontSize * 0.08 + 140);
                  const imgData = offCtx.getImageData(0, 0, areaW, areaH).data;
                  const particles = [];
                  for (let y = 0; y < areaH; y += gap) {
                    for (let x = 0; x < areaW; x += gap) {
                      const idx = (Math.floor(y) * areaW + Math.floor(x)) * 4;
                      if (imgData[idx+3] > 128) {
                        particles.push({x, y});
                      }
                    }
                  }
                  return {particles, fontSize};
                }
                
                function lerpColor(a, b, t) {
                  const ar = parseInt(a.slice(1,3),16), ag = parseInt(a.slice(3,5),16), ab = parseInt(a.slice(5,7),16);
                  const br = parseInt(b.slice(1,3),16), bg = parseInt(b.slice(3,5),16), bb = parseInt(b.slice(5,7),16);
                  const r = Math.round(ar + (br-ar)*t), g = Math.round(ag + (bg-ag)*t), bl = Math.round(ab + (bb-ab)*t);
                  return `rgb(${r},${g},${bl})`;
                }
                
                let particles = [], areaW, areaH, offsetX, offsetY;
                function initParticles() {
                  width = window.innerWidth;
                  canvas.width = width;
                  // 让采样区域高度等于canvas高度，offsetY为0，实现垂直居中
                  areaW = Math.floor(width * 0.8);
                  areaH = height;
                  offsetX = Math.floor((width - areaW) / 2);
                  offsetY = 0;
                  const {particles: pts} = getTextParticles(TEXT, "'Inter', 'Arial', sans-serif", PARTICLE_GAP, areaW, areaH);
                  particles = pts.map((p, i) => {
                    const t = p.x / areaW;
                    // 三段渐变：紫色->柠檬黄->粉色
                    let color;
                    if (t < 0.5) {
                      color = lerpColor('#7C3AED', '#FFE45C', t * 2); // 前半段紫到黄
                    } else {
                      color = lerpColor('#FFE45C', '#FF6EC7', (t-0.5)*2); // 后半段黄到粉
                    }
                    return {
                      tx: p.x + offsetX, ty: p.y + offsetY,
                      x: p.x + offsetX + (Math.random()-0.5)*60,
                      y: p.y + offsetY + (Math.random()-0.5)*60,
                      vx: 0, vy: 0,
                      color: color,
                      baseY: p.y + offsetY,
                      breathPhase: Math.random()*Math.PI*2
                    };
                  });
                }
                
                let mouse = {x: width/2, y: 200, down: false};
                canvas.addEventListener('mousemove', e => {
                  const rect = canvas.getBoundingClientRect();
                  mouse.x = e.clientX - rect.left;
                  mouse.y = e.clientY - rect.top;
                });
                canvas.addEventListener('mouseleave', e => {
                  mouse.x = width/2;
                  mouse.y = height/2;
                });
                
                function animate() {
                  ctx.clearRect(0, 0, width, height);
                  const time = Date.now() * 0.001;
                  for (let p of particles) {
                    const breath = Math.sin(time * BREATH_SPEED + p.breathPhase) * BREATH_AMPLITUDE;
                    const targetY = p.ty + breath;
                    let dx = p.tx - p.x;
                    let dy = targetY - p.y;
                    p.vx += dx * 0.08;
                    p.vy += dy * 0.08;
                    p.vx *= 0.72;
                    p.vy *= 0.72;
                    const mdx = mouse.x - p.x;
                    const mdy = mouse.y - p.y;
                    const mdist = Math.sqrt(mdx*mdx + mdy*mdy);
                    if (mdist < MOUSE_ATTRACT_DIST) {
                      p.vx += mdx * MOUSE_ATTRACT_FORCE * (1-mdist/MOUSE_ATTRACT_DIST);
                      p.vy += mdy * MOUSE_ATTRACT_FORCE * (1-mdist/MOUSE_ATTRACT_DIST);
                    }
                    p.x += p.vx;
                    p.y += p.vy;
                    ctx.beginPath();
                    ctx.arc(p.x, p.y, PARTICLE_SIZE, 0, Math.PI*2);
                    ctx.fillStyle = p.color;
                    ctx.globalAlpha = 0.85;
                    ctx.fill();
                    ctx.globalAlpha = 1;
                  }
                  requestAnimationFrame(animate);
                }
                
                // 页面加载和窗口大小变化时调用
                window.addEventListener('load', setParticleSectionHeight);
                window.addEventListener('resize', setParticleSectionHeight);
                
                animate();
            </script>
        </section>
        
        

        <!-- 统计区域 -->
        <!-- <section class="py-16 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
                    <div class="text-center">
                        <div class="text-3xl font-bold text-secondary mb-2">10,000+</div>
                        <div class="text-gray-600">活跃学习者</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-secondary mb-2">500+</div>
                        <div class="text-gray-600">优质课程</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-secondary mb-2">50+</div>
                        <div class="text-gray-600">AI 工具</div>
                    </div>
                    <div class="text-center">
                        <div class="text-3xl font-bold text-secondary mb-2">99%</div>
                        <div class="text-gray-600">满意度</div>
                    </div>
                </div>
            </div>
        </section> -->

        <!-- 功能模块 -->
        <section id="knowledge" class="py-24 bg-gray-50">
            <div class="max-w-7xl mx-auto px-4 sm:px-2 lg:px-2">
                <div class="text-center mb-16">
                    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">学习社区</h2>
                    <p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto">
                        知识启蒙，由浅入深，从开始到放弃
                    </p>
                </div>
                
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
                    <a href="./AiEntry/index.html" class="bg-white rounded-2xl p-8 shadow-lg learning-community-card  block hover:shadow-xl transition-all duration-300 ">
                        <div class="w-16 h-16 bg-gradient-to-br from-yellow-100 to-yellow-200 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-book text-yellow-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">AI词条</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">系统梳理AI领域核心概念，快速了解每个AI术语的定义与应用场景。</p>
                        <div class="!rounded-button text-yellow-600 hover:bg-yellow-50 px-6 py-3 transition-all duration-300 whitespace-nowrap font-medium explore-button">
                            开始探索 <i class="fas fa-arrow-right ml-2"></i>
                        </div>
                    </a>

                    <a href="./AiOpen/index.html" class="bg-white rounded-2xl p-8 shadow-lg learning-community-card block hover:shadow-xl transition-all duration-300">
                        <div class="w-16 h-16 bg-gradient-to-br from-green-100 to-green-200 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-code-branch text-green-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">AI开源</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">精选AI开源项目与工具，助你快速上手并参与AI社区创新实践。</p>
                        <div class="!rounded-button text-green-600 hover:bg-green-50 px-6 py-3 transition-all duration-300 whitespace-nowrap font-medium explore-button">
                            开始探索 <i class="fas fa-arrow-right ml-2"></i>
                        </div>
                    </a>

                    <a href="./AiHardware/index.html" class="bg-white rounded-2xl p-8 shadow-lg learning-community-card block hover:shadow-xl transition-all duration-300">
                        <div class="w-16 h-16 bg-gradient-to-br from-blue-100 to-blue-200 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-microchip text-blue-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">AI硬件</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">聚焦AI芯片、设备与硬件生态，解析AI硬件选型与发展趋势。</p>
                        <div class="!rounded-button text-blue-600 hover:bg-blue-50 px-6 py-3 transition-all duration-300 whitespace-nowrap font-medium explore-button">
                            开始探索 <i class="fas fa-arrow-right ml-2"></i>
                        </div>
                    </a>

                    <a href="./AiPrompts/index.html" class="bg-white rounded-2xl p-8 shadow-lg learning-community-card block hover:shadow-xl transition-all duration-300">
                        <div class="w-16 h-16 bg-gradient-to-br from-purple-100 to-purple-200 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-terminal text-purple-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">指令库</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">收录高效实用的AI提示词与指令，助你提升AI工具的使用效率。</p>
                        <div class="!rounded-button text-purple-600 hover:bg-purple-50 px-6 py-3 transition-all duration-300 whitespace-nowrap font-medium explore-button">
                            开始探索 <i class="fas fa-arrow-right ml-2"></i>
                        </div>
                    </a>

                    <a href="./AiBlog/index.html" class="bg-white rounded-2xl p-8 shadow-lg learning-community-card block hover:shadow-xl transition-all duration-300">
                        <div class="w-16 h-16 bg-gradient-to-br from-pink-100 to-pink-200 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-lightbulb text-pink-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">AI思考（博客）</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">分享AI行业洞察、趋势分析与创新思考，启发你的AI未来视野。</p>
                        <div class="!rounded-button text-pink-600 hover:bg-pink-50 px-6 py-3 transition-all duration-300 whitespace-nowrap font-medium explore-button">
                            开始探索 <i class="fas fa-arrow-right ml-2"></i>
                        </div>
                    </a>

                    <a href="#" class="bg-white rounded-2xl p-8 shadow-lg learning-community-card block hover:shadow-xl transition-all duration-300">
                        <div class="w-16 h-16 bg-gradient-to-br from-indigo-100 to-indigo-200 rounded-2xl flex items-center justify-center mb-6">
                            <i class="fas fa-globe text-indigo-600 text-2xl"></i>
                        </div>
                        <h3 class="text-2xl font-bold text-gray-900 mb-4">知识星球</h3>
                        <p class="text-gray-600 mb-6 leading-relaxed">加入知识星球社群，结识志同道合的AI学习者，共同成长进步。</p>
                        <div class="!rounded-button text-indigo-600 hover:bg-indigo-50 px-6 py-3 transition-all duration-300 whitespace-nowrap font-medium explore-button">
                            开始探索 <i class="fas fa-arrow-right ml-2"></i>
                        </div>
                    </a>
                </div>
            </div>
        </section>

        <!-- AI原型案例 -->
        <section class="py-24 bg-gradient-to-br from-gray-50 to-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-16">
                    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">AI原型案例</h2>
                    <p class="text-lg sm:text-xl text-gray-600 max-w-3xl mx-auto">
                        用AI设计的产品原型项目，点击体验完整交互流程
                    </p>
                </div>
                <div id="projectList" class="grid grid-cols-1 lg:grid-cols-2 gap-8">
                    <!-- 项目列表将通过JavaScript动态加载 -->
                    <div class="flex items-center justify-center py-8 col-span-full">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                        <span class="ml-2 text-gray-600">加载中...</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 访问词条 -->
        <section class="py-12 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-10">
                    <h2 class="text-2xl sm:text-3xl font-bold text-gray-900 mb-4">热门词条</h2>
                    <p class="text-lg text-gray-600">精选AI核心概念，快速了解前沿技术</p>
                </div>
                <div id="entryList" class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
                    <!-- 词条列表将通过JavaScript动态加载 -->
                    <div class="flex items-center justify-center py-8 col-span-full">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                        <span class="ml-2 text-gray-600">加载中...</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 博客推荐模块 -->
        <section class="py-24 bg-white">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
                <div class="text-center mb-12">
                    <h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-6">优质博客</h2>
                    <p class="text-lg sm:text-xl text-gray-600 max-w-2xl mx-auto">
                        精选思考，持续更新，拓展视野
                    </p>
                </div>
                <div id="blogList" class="divide-y divide-gray-200 bg-white">
                    <!-- 博客列表将通过JavaScript动态加载 -->
                    <div class="flex items-center justify-center py-8">
                        <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
                        <span class="ml-2 text-gray-600">加载中...</span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 订阅区域 -->
        <!-- <section class="py-24 bg-gradient-to-br from-secondary to-purple-700">
            <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
                <h2 class="text-3xl sm:text-4xl font-bold text-white mb-6">加入 lumina AI 学习社区</h2>
                <p class="text-xl text-white/90 mb-10">
                    订阅我们的最新动态，获取独家 AI 学习资源和行业洞察
                </p>
                
                <div class="flex flex-col sm:flex-row gap-4 max-w-md mx-auto">
                    <input type="email" placeholder="输入你的邮箱地址" class="flex-1 px-6 py-4 rounded-button text-gray-900 focus:outline-none focus:ring-2 focus:ring-white/50">
                    <button class="!rounded-button bg-white text-secondary px-8 py-4 font-semibold hover:bg-gray-100 transition-colors whitespace-nowrap">
                        立即订阅
                    </button>
                </div>
                
                <p class="text-sm text-white/70 mt-4">
                    我们承诺保护你的隐私，不会发送垃圾邮件
                </p>
            </div>
        </section> -->
    </main>

    <!-- 简洁页脚 -->
    <footer class="bg-gray-50 text-gray-500 py-8 border-t border-gray-200 mt-auto">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
            <div class="mb-2 text-base font-semibold text-gray-700 site-description"></div>
            <div class="text-xs text-gray-400 icp-number"></div>
        </div>
    </footer>

    <!-- JavaScript -->
    <script src="assets/js/common.js"></script>
    
    <!-- 博客推荐模块JavaScript -->
    <script>
        // 博客推荐模块功能
        class BlogRecommendation {
            constructor() {
                this.blogList = document.getElementById('blogList');
                this.blogs = [];
                this.init();
            }

            async init() {
                try {
                    await this.loadBlogData();
                    this.renderBlogList();
                } catch (error) {
                    console.error('加载博客数据失败:', error);
                    this.showError();
                }
            }

            async loadBlogData() {
                try {
                    const response = await fetch('./AiBlog/Blogs.json');
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    const data = await response.json();
                    this.blogs = data.blogs || [];
                    
                    // 按发布日期排序，最新的在前面
                    this.blogs.sort((a, b) => new Date(b.publishDate) - new Date(a.publishDate));
                    
                    // 只显示最新的8篇博客
                    this.blogs = this.blogs.slice(0, 8);
                } catch (error) {
                    console.error('获取博客数据失败:', error);
                    throw error;
                }
            }

            renderBlogList() {
                if (!this.blogs || this.blogs.length === 0) {
                    this.showNoData();
                    return;
                }

                const blogHTML = this.blogs.map(blog => `
                    <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between px-6 py-5 hover:bg-gray-50 transition cursor-pointer" 
                         onclick="window.location.href='./AiBlog/blog-detail.html?id=${blog.id}'">
                        <div class="flex flex-col sm:flex-row sm:items-center gap-2">
                            <a href="./AiBlog/blog-detail.html?id=${blog.id}" 
                               class="text-lg font-semibold text-gray-900 hover:text-primary transition-colors duration-200"
                               onclick="event.stopPropagation()">
                                ${blog.title}
                            </a>
                            <span class="text-sm text-gray-500 sm:ml-4">作者：${blog.author}</span>
                        </div>
                        <div class="text-sm text-gray-400 mt-2 sm:mt-0 sm:ml-4 whitespace-nowrap">
                            ${this.formatDate(blog.publishDate)}
                        </div>
                    </div>
                `).join('');

                this.blogList.innerHTML = blogHTML;
            }

            formatDate(dateString) {
                try {
                    const date = new Date(dateString);
                    const now = new Date();
                    const diffTime = Math.abs(now - date);
                    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
                    
                    if (diffDays === 1) {
                        return '昨天';
                    } else if (diffDays <= 7) {
                        return `${diffDays}天前`;
                    } else if (diffDays <= 30) {
                        const weeks = Math.ceil(diffDays / 7);
                        return `${weeks}周前`;
                    } else {
                        return date.toLocaleDateString('zh-CN', {
                            year: 'numeric',
                            month: '2-digit',
                            day: '2-digit'
                        });
                    }
                } catch (error) {
                    return dateString;
                }
            }

            showError() {
                this.blogList.innerHTML = `
                    <div class="flex items-center justify-center py-8 text-center">
                        <div class="text-gray-500">
                            <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
                            <p>加载失败，请稍后重试</p>
                        </div>
                    </div>
                `;
            }

            showNoData() {
                this.blogList.innerHTML = `
                    <div class="flex items-center justify-center py-8 text-center">
                        <div class="text-gray-500">
                            <i class="fas fa-inbox text-2xl mb-2"></i>
                            <p>暂无博客数据</p>
                        </div>
                    </div>
                `;
            }
        }

        // 页面加载完成后初始化博客推荐模块
        document.addEventListener('DOMContentLoaded', () => {
            new BlogRecommendation();
            new EntryRecommendation();
            new ProjectShowcase();
        });
    </script>
    
    <!-- AI原型案例模块JavaScript -->
    <script>
        // AI原型案例展示功能
        class ProjectShowcase {
            constructor() {
                this.projectList = document.getElementById('projectList');
                this.projects = [];
                this.init();
            }

            async init() {
                try {
                    await this.loadProjectData();
                    this.renderProjectList();
                } catch (error) {
                    console.error('加载项目数据失败:', error);
                    this.showError();
                }
            }

            async loadProjectData() {
                try {
                    // 尝试多个可能的路径
                    const possiblePaths = [
                        '../subProject/Projects.json',  // 本地相对路径
                        '/subProject/Projects.json',    // 绝对路径（本地根目录）
                        this.getProjectJsonPath()       // 动态计算路径
                    ];
                    
                    let data = null;
                    let lastError = null;
                    
                    for (const jsonPath of possiblePaths) {
                        try {
                            console.log('尝试加载项目数据:', jsonPath);
                            const response = await fetch(jsonPath);
                            
                            if (response.ok) {
                                const text = await response.text();
                                // 验证是否是有效的 JSON
                                if (text.trim().startsWith('{')) {
                                    data = JSON.parse(text);
                                    console.log('✅ 成功加载项目数据:', jsonPath);
                                    break;
                                }
                            }
                        } catch (error) {
                            lastError = error;
                            console.warn(`路径 ${jsonPath} 加载失败:`, error.message);
                        }
                    }
                    
                    if (!data) {
                        throw lastError || new Error('无法加载项目数据');
                    }
                    
                    this.projects = data.projects || [];
                    
                    // 按更新日期排序，最新的在前面
                    this.projects.sort((a, b) => new Date(b.updateDate) - new Date(a.updateDate));
                } catch (error) {
                    console.error('获取项目数据失败:', error);
                    throw error;
                }
            }
            
            getProjectJsonPath() {
                // 动态计算路径，支持 GitHub Pages 等部署环境
                const pathname = window.location.pathname;
                
                // 如果路径中包含仓库名（GitHub Pages）
                // 例如：/lumina/frontend/index.html -> /lumina/subProject/Projects.json
                if (pathname.includes('/frontend/')) {
                    const parts = pathname.split('/frontend/');
                    return parts[0] + '/subProject/Projects.json';
                }
                
                // 默认返回相对路径
                return '../subProject/Projects.json';
            }

            getProjectUrl(entryUrl) {
                // 动态计算项目入口URL，支持不同部署环境
                const pathname = window.location.pathname;
                
                // 如果在子目录中（GitHub Pages）
                if (pathname.includes('/frontend/')) {
                    const parts = pathname.split('/frontend/');
                    return parts[0] + '/' + entryUrl;
                }
                
                // 本地环境，使用相对路径
                return '../' + entryUrl;
            }

            renderProjectList() {
                if (!this.projects || this.projects.length === 0) {
                    this.showNoData();
                    return;
                }

                const projectHTML = this.projects.map(project => `
                    <div class="group bg-white rounded-3xl p-5 sm:p-8 shadow-lg hover:shadow-2xl transition-all duration-500 border-2 border-transparent hover:border-primary">
                        <!-- 移动端：垂直布局 | 桌面端：横向布局 -->
                        <div class="flex flex-col sm:flex-row items-start gap-4 sm:gap-6">
                            <!-- 图标区域 -->
                            <div class="flex-shrink-0 w-full sm:w-auto flex sm:block justify-between items-center sm:items-start">
                                <div class="w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-br ${this.getColorGradient(project.logoColor)} rounded-2xl flex items-center justify-center shadow-md group-hover:scale-110 transition-transform duration-300">
                                    <i class="${project.logo} text-2xl sm:text-3xl text-white"></i>
                                </div>
                                <!-- 移动端状态标签（右侧） -->
                                <span class="sm:hidden px-3 py-1 bg-green-100 text-green-700 text-xs font-medium rounded-full whitespace-nowrap">
                                    ${project.status}
                                </span>
                            </div>
                            
                            <!-- 内容区域 -->
                            <div class="flex-1 min-w-0 w-full">
                                <!-- 标题和状态（桌面端） -->
                                <div class="flex items-start justify-between mb-3">
                                    <h3 class="text-xl sm:text-2xl font-bold text-gray-900 group-hover:text-primary transition-colors duration-300">
                                        ${project.name}
                                    </h3>
                                    <!-- 桌面端状态标签 -->
                                    <span class="hidden sm:inline-block ml-4 px-3 py-1 bg-green-100 text-green-700 text-sm font-medium rounded-full whitespace-nowrap">
                                        ${project.status}
                                    </span>
                                </div>
                                
                                <!-- 描述 -->
                                <p class="text-sm sm:text-base text-gray-600 mb-4 leading-relaxed">
                                    ${project.description}
                                </p>
                                
                                <!-- 亮点 -->
                                <div class="bg-gradient-to-r from-primary/10 to-purple-50 rounded-xl p-3 sm:p-4 mb-4">
                                    <p class="text-xs sm:text-sm text-gray-700 leading-relaxed">
                                        ${project.highlights}
                                    </p>
                                </div>
                                
                                <!-- 特性列表：移动端单列，桌面端双列 -->
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-2 mb-4">
                                    ${project.features.slice(0, 4).map(feature => `
                                        <div class="flex items-start gap-2 text-xs sm:text-sm text-gray-600">
                                            <i class="fas fa-check-circle text-green-500 mt-0.5 flex-shrink-0"></i>
                                            <span class="leading-snug">${feature}</span>
                                        </div>
                                    `).join('')}
                                </div>
                                
                                <!-- 标签 -->
                                <div class="flex flex-wrap gap-1.5 sm:gap-2 mb-4">
                                    ${project.tags.map(tag => `
                                        <span class="px-2 sm:px-3 py-1 bg-gray-100 text-gray-600 text-xs rounded-full group-hover:bg-primary/20 transition-colors duration-300">
                                            ${tag}
                                        </span>
                                    `).join('')}
                                </div>
                                
                                <!-- 底部：移动端垂直布局，桌面端横向布局 -->
                                <div class="flex flex-col sm:flex-row items-stretch sm:items-center justify-between gap-3 pt-4 border-t border-gray-100">
                                    <div class="flex items-center gap-2 text-xs text-gray-500 order-2 sm:order-1">
                                        <i class="fas fa-code"></i>
                                        <span>${project.tech.slice(0, 2).join(' · ')}</span>
                                    </div>
                                    <a href="${this.getProjectUrl(project.entryUrl)}" 
                                       target="_blank"
                                       class="inline-flex items-center justify-center gap-2 px-5 sm:px-6 py-2.5 sm:py-3 bg-gradient-to-r from-primary to-yellow-400 text-gray-900 font-semibold rounded-xl hover:shadow-lg hover:scale-105 transition-all duration-300 text-sm sm:text-base order-1 sm:order-2">
                                        <span>立即体验</span>
                                        <i class="fas fa-arrow-right"></i>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                `).join('');

                this.projectList.innerHTML = projectHTML;
            }

            getColorGradient(color) {
                const gradients = {
                    'pink': 'from-pink-500 to-pink-600',
                    'red': 'from-red-500 to-red-600',
                    'orange': 'from-orange-500 to-orange-600',
                    'yellow': 'from-yellow-500 to-yellow-600',
                    'green': 'from-green-500 to-green-600',
                    'teal': 'from-teal-500 to-teal-600',
                    'blue': 'from-blue-500 to-blue-600',
                    'indigo': 'from-indigo-500 to-indigo-600',
                    'purple': 'from-purple-500 to-purple-600'
                };
                return gradients[color] || 'from-gray-500 to-gray-600';
            }

            showError() {
                this.projectList.innerHTML = `
                    <div class="flex items-center justify-center py-12 col-span-full text-center">
                        <div class="text-gray-500">
                            <i class="fas fa-exclamation-triangle text-3xl mb-3"></i>
                            <p class="text-lg">加载失败，请稍后重试</p>
                        </div>
                    </div>
                `;
            }

            showNoData() {
                this.projectList.innerHTML = `
                    <div class="flex items-center justify-center py-12 col-span-full text-center">
                        <div class="text-gray-500">
                            <i class="fas fa-inbox text-3xl mb-3"></i>
                            <p class="text-lg">暂无项目数据</p>
                        </div>
                    </div>
                `;
            }
        }
    </script>
    
    <!-- 词条推荐模块JavaScript -->
    <script>
        // 词条推荐模块功能
        class EntryRecommendation {
            constructor() {
                this.entryList = document.getElementById('entryList');
                this.entries = [];
                this.init();
            }

            async init() {
                try {
                    await this.loadEntryData();
                    this.renderEntryList();
                } catch (error) {
                    console.error('加载词条数据失败:', error);
                    this.showError();
                }
            }

            async loadEntryData() {
                try {
                    const response = await fetch('./AiEntry/Entrys.json');
                    if (!response.ok) {
                        throw new Error(`HTTP error! status: ${response.status}`);
                    }
                    const data = await response.json();
                    this.entries = data.entries || [];
                    
                    // 按发布时间排序，最新的在前面
                    this.entries.sort((a, b) => new Date(b.publishTime) - new Date(a.publishTime));
                    
                    // 只显示最新的6个热门词条
                    this.entries = this.entries.slice(0, 6);
                } catch (error) {
                    console.error('获取词条数据失败:', error);
                    throw error;
                }
            }

            renderEntryList() {
                if (!this.entries || this.entries.length === 0) {
                    this.showNoData();
                    return;
                }

                const entryHTML = this.entries.map(entry => `
                    <a href="./AiEntry/card-detail.html?id=${entry.id}" 
                       class="group block bg-white rounded-2xl p-6 card-hover border border-theme hover:bg-theme hover:text-gray-900 transition-all duration-300">
                        <div class="flex items-center gap-4 mb-4">
                            <div class="w-10 h-10 bg-gradient-to-br ${this.getColorClass(entry.logoColor)} rounded-xl flex items-center justify-center">
                                <i class="${entry.logo} text-xl text-white"></i>
                            </div>
                            <span class="text-xl font-bold group-hover:text-gray-900">${entry.name}</span>
                        </div>
                        <p class="text-gray-500 group-hover:text-gray-900 text-sm leading-relaxed">${entry.description}</p>
                        <div class="mt-4 flex flex-wrap gap-2">
                            ${entry.tags.slice(0, 3).map(tag => `
                                <span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs rounded-full group-hover:bg-gray-200">
                                    ${tag}
                                </span>
                            `).join('')}
                        </div>
                    </a>
                `).join('');

                this.entryList.innerHTML = entryHTML;
            }

            getColorClass(logoColor) {
                const colorMap = {
                    'blue': 'from-blue-500 to-blue-600',
                    'green': 'from-green-500 to-green-600',
                    'purple': 'from-purple-500 to-purple-600',
                    'orange': 'from-orange-500 to-orange-600',
                    'teal': 'from-teal-500 to-teal-600',
                    'pink': 'from-pink-500 to-pink-600',
                    'indigo': 'from-indigo-500 to-indigo-600',
                    'cyan': 'from-cyan-500 to-cyan-600',
                    'amber': 'from-amber-500 to-amber-600',
                    'red': 'from-red-500 to-red-600'
                };
                return colorMap[logoColor] || 'from-gray-500 to-gray-600';
            }

            showError() {
                this.entryList.innerHTML = `
                    <div class="flex items-center justify-center py-8 col-span-full text-center">
                        <div class="text-gray-500">
                            <i class="fas fa-exclamation-triangle text-2xl mb-2"></i>
                            <p>加载失败，请稍后重试</p>
                        </div>
                    </div>
                `;
            }

            showNoData() {
                this.entryList.innerHTML = `
                    <div class="flex items-center justify-center py-8 col-span-full text-center">
                        <div class="text-gray-500">
                            <i class="fas fa-inbox text-2xl mb-2"></i>
                            <p>暂无词条数据</p>
                        </div>
                    </div>
                `;
            }
        }
    </script>
</body>
</html>